<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Cache" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>拖动div</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #box {
        width: 280px;
        height: 640px;
        text-align: center;
        background-color: yellowgreen;
        position: relative; /* 非常重要*/
        left: 0;
        top: 0;
        user-select: none;
      }
      #dragDiv {
        height: 12.5%;
        width: 100%;
        background-color: aqua;
      }
      #content {
        height: 87.5%;
        width: 100%;
        background-color: rgb(0, 255, 76);
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div id="dragDiv">title</div>
      <div id="content">content</div>
    </div>
  </body>
  <script>
    var isClick = false;
    var box = document.getElementById("box");
    var mouseX;
    var mouseY;
    function mouseDown(event) {
      isClick = true;
      // 记录鼠标按下的一瞬间的offsetX和offsetY
      // 因为鼠标在拖动过程中相对于div中的位置不会改变
      mouseX = event.offsetX;
      mouseY = event.offsetY;
      onmousemove = mouseMove;
      onmouseup = mouseUp;
    }
    function mouseMove(event) {
      if (isClick) {
        //div位置=鼠标位置-鼠标在div的位置
        var divX = event.clientX - mouseX;
        var divY = event.clientY - mouseY;

        box.style.top = divY + "px";
        box.style.left = divX + "px";
      }
    }
    function mouseUp(params) {
      isClick = false;
    }

    onmousedown = mouseDown;
  </script>
</html>
